<template>
    <tr>
        <td v-if="isEdited==false">{{ roomusage2.classroom_name }}</td>
        <td v-if="isEdited==false">{{ roomusage2.course_name }}</td>
        <td v-if="isEdited==false">{{ roomusage2.class_name }}</td>
        <td v-if="isEdited==false">{{ roomusage2.name }}</td>
        <td v-if="isEdited==false">{{ roomusage2.classroom_status }}</td>
        <td v-if="isEdited==false">
            {{ roomusage2.usage_time }}
        </td>
        <td v-if="isEdited==false">
            <el-button type="primary" icon="el-icon-edit" circle @click='edit'></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete"></el-button>
        </td>

        <td v-if="isEdited==true">
                <!-- <el-input type="text" v-model.number="roomusage2.classroomId" class="w-50"></el-input> -->
                <el-select v-model="roomusage2.classroom_name" class="w-50"  placeholder="请选择" @change="handleClassRoomSelectChange">
                    <el-option
                    v-for="item in classrooms"
                    :key="item.classroomId"
                    :label="item.classroomName"
                    :value="item">
                    </el-option>
                </el-select>
        </td>
        <td v-if="isEdited==true">
            <el-select v-model="roomusage2.course_name" class="w-50"  placeholder="请选择" @change="handleClassCourseSelectChange">
                <el-option
                v-for="item in courses"
                :key="item.courseId"
                :label="item.courseName"
                :value="item">
                </el-option>
            </el-select>
                <!-- <el-input type="text" v-model="roomusage2.courseId" class="w-75"></el-input>    -->

        </td>
        <td v-if="isEdited==true">
            <el-select v-model="roomusage2.class_name" aria-label="" class="w-50"  placeholder="请选择" @change="handleClassSelectChange">
                <el-option
                v-for="item in classInformations"
                :key="item.classId"
                :label="item.className"
                :value="item">
                </el-option>
            </el-select>
        </td>
        <td v-if="isEdited==true">
            <el-select v-model="roomusage2.name" class="w-50"  placeholder="请选择" @change="handleUsersSelectChange">
                <el-option
                v-for="item in users"
                :key="item.id"
                :label="item.name"
                :value="item">
                </el-option>
            </el-select>
        </td>
        <td v-if="isEdited==true">
                <el-select v-model="roomusage2.classroom_status" class="w-50"  placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
        </td>
        <td v-if="isEdited==true">
            <el-date-picker class="w-50"
                v-model="roomusage2.usage_time"
                type="datetime"
                placeholder="选择日期时间"
                format = "yyyy-MM-dd HH:mm:ss"
                value-format = "yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
        </td>

        <td v-if="isEdited==true">
         <el-button type="success" icon="el-icon-check" circle @click="save"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete"></el-button>
        </td>
    </tr>
    
    
</template>

<script>
import axios from 'axios'
// import SelectPlace from "./SelectPlace"
export default {
    props:["roomusage2","courses","classInformations","classrooms","users"],
    data() {
        return { 
            isEdited:false,
            options: [{
                value: '空闲中',
                label: '空闲中'
                }, {
                value: '使用中',
                label: '使用中'
                }],
            
        }
    },
    components: {
        // SelectPlace
    },
    methods: {
        handleClassSelectChange(item) {
            this.roomusage2.class_id = item.classId;
            this.roomusage2.class_name = item.className;
        },
        handleClassRoomSelectChange(item) {
            this.roomusage2.classroom_id = item.classroomId;
            this.roomusage2.classroom_name = item.classroomName;
        },
        handleClassCourseSelectChange(item) {
            this.roomusage2.course_id = item.courseId;
            this.roomusage2.course_name = item.courseName;
        },
        handleUsersSelectChange(item) {
            this.roomusage2.uid = item.id;
            this.roomusage2.name = item.name;
        },
        edit(){
            this.isEdited=true;
            console.log(this.$route.params);
        },
       async save(){
            var requestData = {};
            requestData["classroomId"] = this.roomusage2.classroom_id;
            requestData["classId"] = this.roomusage2.class_id;
            requestData["teacherId"] = this.roomusage2.uid;
            requestData["courseId"] = this.roomusage2.course_id;
            requestData["classroomStatus"] = this.roomusage2.classroom_status;
            requestData["usageTime"] = this.roomusage2.usage_time;
            requestData["id"] = this.roomusage2.id;
            await axios({
                headers: {
                    "Content-Type": "application/json"
                },
                url:"http://localhost:8080/classroom_Usage/update",
                method:"POST",
                data: JSON.stringify(requestData)
            })
            this.isEdited=false;
            
        },
        
        handleDelete(){
           this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await  axios({
                url:"http://localhost:8080/classroom_Usage/delete/",
                method: 'POST',
                data:{
                    id:this.roomusage2.id
                }
            })
            this.$emit('reloadTable');
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        }
    },
    filters: {
    }

}
</script>

<style scoped>
    input{
        height:30px
    }
    td{
        width:60px
    }
</style>